<template>
  <div>
    <div>
      <el-form
        :model="queryForm"
        ref="queryForm"
        :inline="true"
        label-width="68px"
        class="globalSerchFormStyle"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="发放标识" prop="issueRemark">
              <el-input
                v-model="queryForm.issueRemark"
                placeholder="请输入标识"
                clearable
                size="small"
                style="width: 190px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发放类型" prop="issueType">
              <el-select
                v-model="queryForm.issueType"
                clearable
                placeholder="请选择"
                size="small"
                style="width: 190px"
              >
                <el-option label="消费发放" value="1"></el-option>
                <el-option label="网页 静态二维码" value="2"></el-option>
                <el-option label="支付成功后的展示位" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发放名称" prop="issueName">
              <el-input
                v-model="queryForm.issueName"
                placeholder="请输入名称"
                clearable
                size="small"
                style="width: 190px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生效状态" prop="status">
              <el-select
                v-model="queryForm.status"
                clearable
                placeholder="请选择"
                size="small"
                style="width: 190px"
              >
                <el-option label="开启" value="1"></el-option>
                <el-option label="关闭" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="collapse">
          <el-col :span="6">
            <el-form-item label="创建时间" prop="getCreateTime">
              <el-date-picker
                style="width: 190px"
                v-model="dateRangeCreatedDate"
                size="small"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-row class="global_el_rowStyle" :gutter="10">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
            plain
            >重置</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            plain
            size="mini"
            id="closeSearchBtn"
            @click="
              (closeSearch) => {
                collapse = !collapse;
              }
            "
          >
            {{ collapse ? "收起" : "展开更多" }}
            <i
              :class="collapse ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"
            ></i>
          </el-button>
        </el-col>
      </el-row>

      <el-table :data="issueList" stripe v-loading="loading">
        <!-- <af-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="props.row.couponList"
              :show-header="false"
              :highlight-current-row="false"
              style="width: 90vw"
            >
              <af-table-column label="名城" align="left">
                <template slot-scope="scope">
                  {{ "优惠券：" }}<b>{{ scope.row.couponRemark }}</b>
                </template>
              </af-table-column>
              <af-table-column label="卡片类型" align="left">
                <template slot-scope="scope">
                  {{
                    scope.row.couponType == 1
                      ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
                      : ""
                  }}
                  {{
                    scope.row.couponType == 2
                      ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
                      : ""
                  }}
                  {{
                    scope.row.couponType == 3
                      ? "兑换券" + "--商品：" + scope.row.couponName
                      : ""
                  }}
                </template>
              </af-table-column>
              <af-table-column label="状态" align="left">
                <template slot-scope="scope">
                  {{ scope.row.status == "1" ? "启用状态" : "" }}
                  {{ scope.row.status == "0" ? "停用状态" : "" }}
                </template>
              </af-table-column>
            </el-table>
          </template>
        </af-table-column>
        <af-table-column label="发放方式id" align="left" prop="id" v-if="false" />  
        <af-table-column label="发放方式标识" align="left" prop="issueRemark" />
         <af-table-column label="状态" align="left">
          <template slot-scope="scope">
            {{ scope.row.status == "1" ? "启用" : "" }}
            {{ scope.row.status == "0" ? "停用" : "" }}
          </template>
        </af-table-column> 
        <af-table-column label="活动名称" align="left" prop="issueName" />
        <af-table-column label="类型" align="left">
          <template slot-scope="scope">
            {{ scope.row.issueType == "1" ? "消费发放" : "" }}
            {{ scope.row.issueType == "2" ? "网页方式、二维码-静态码" : "" }}
            {{ scope.row.issueType == "3" ? "支付成功后的领取位" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="发放门槛" align="left">
          <template slot-scope="scope">
            {{
              scope.row.issueType == "1"
                ? scope.row.discountThresholdAmt == "0"
                  ? "无门槛，消费都发放"
                  : "满" + scope.row.discountThresholdAmt + "元发放"
                : ""
            }}
            {{ scope.row.issueType != "1" ? "-------" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="领取限制" align="left">
          <template slot-scope="scope">
            {{ scope.row.issueType == "1" ? "-------" : "" }}
            {{
              scope.row.issueType != "1"
                ? "单个用户能进入这个领取界面" +
                  scope.row.giveCount +
                  "次，一次可以领取" +
                  scope.row.giveLimit +
                  "张优惠券"
                : ""
            }}
          </template>
        </af-table-column>
        <af-table-column label="可领取时间段" align="left">
          <template slot-scope="scope">
            {{ translateTime(scope.row) }}
          </template>
        </af-table-column> -->

        <af-table-column label="发放方式标识" align="left" prop="issueRemark" />
        <af-table-column label="状态" align="left">
          <template slot-scope="scope">
            {{ scope.row.status == "1" ? "启用" : "" }}
            {{ scope.row.status == "0" ? "停用" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="活动名称" align="left" prop="issueName" />
        <af-table-column label="类型" align="left">
          <template slot-scope="scope">
            {{ scope.row.issueType == "1" ? "消费发放" : "" }}
            {{ scope.row.issueType == "2" ? "网页方式、二维码-静态码" : "" }}
            {{ scope.row.issueType == "3" ? "支付成功后的领取位" : "" }}
            {{ scope.row.issueType == "4" ? "数据预录入模板" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="附件" align="left">
          <template slot-scope="scope">
            {{
              scope.row.issueType == "1" ||
              scope.row.issueType == "3" ||
              scope.row.issueType == "4"
                ? "-------"
                : ""
            }}
            <el-button
              size="mini"
              type="text"
              icon="el-icon-download"
              @click="handleExport(scope.row)"
              v-if="scope.row.issueType == '2'"
              >导出二维码、网址</el-button
            >
          </template>
        </af-table-column>
        <af-table-column
          label="操作"
          align="left"
          class-name="small-padding fixed-width"
          width="120px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-search"
              @click="handlequeryCouponUserList(scope.row.id)"
              >查看优惠券</el-button
            >
          </template>
        </af-table-column>
      </el-table>
      <pagination
        :hidden="total > 0 ? false : true"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="getIssueList"
        :autoScroll="true"
      />
    </div>

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px"
      append-to-body
      status-icon
    >
      <el-table :data="couponUserList">
        <af-table-column
          label="油站名"
          align="left"
          prop="id"
          v-if="jiBie == 0 || jiBie == 1"
        />
        <af-table-column v-if="false" label="优惠券id" align="left" prop="id" />
        <af-table-column
          label="用户ID"
          align="left"
          prop="unionId"
          v-if="false"
        />
        <af-table-column
          label="油站ID"
          align="left"
          prop="stationId"
          v-if="false"
        />
        <af-table-column
          label="发放方式ID"
          align="left"
          prop="issueId"
          v-if="false"
        />
        <af-table-column label="发放方式标识" align="left" prop="issueRemark" />
        <af-table-column label="活动名称" align="left" prop="issueName" />

        <af-table-column
          label="优惠券ID"
          align="left"
          prop="couponId"
          v-if="false"
        />
        <af-table-column
          label="优惠券标识"
          align="left"
          prop="couponRemark"
          fixed="left"
        />
        <af-table-column label="卡片类型" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1
                ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
                : ""
            }}
            {{
              scope.row.couponType == 2
                ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
                : ""
            }}
            {{
              scope.row.couponType == 3
                ? "兑换券" + "--商品：" + scope.row.couponName
                : ""
            }}
          </template>
        </af-table-column>
        <af-table-column label="是否使用" align="left">
          <template slot-scope="scope">
            {{ scope.row.couponIsUsed == "0" ? "未使用" : "" }}
            {{ scope.row.couponIsUsed == "1" ? "已使用" : "" }}
            {{ scope.row.couponIsUsed == "2" ? "已核销" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="是否有效" align="left">
          <template slot-scope="scope">
            {{ scope.row.couponIsEffective == "0" ? "无效" : "" }}
            {{ scope.row.couponIsEffective == "1" ? "有效" : "" }}
          </template>
        </af-table-column>
        <af-table-column
          label="用户保存id"
          align="left"
          prop="userId"
          v-if="false"
        />
        <af-table-column label="手机号" align="left" prop="mobilePhone" />
        <af-table-column label="用户名" align="left" prop="blogNickName" />
        <af-table-column
          label="核销员账号"
          align="left"
          prop="verificationUserAccount"
        />
        <af-table-column label="获取时间" align="left" prop="couponGetTime" />
        <af-table-column
          label="核销时间"
          align="left"
          prop="verificationTime"
        />

        <!-- <af-table-column label="优惠券获取时间" align="left" prop="getCouponTime">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.getCouponTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </af-table-column>
      <af-table-column label="优惠券截止时间" align="left" prop="couponEffectiveTime">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.couponEffectiveTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </af-table-column> -->
      </el-table>
      <pagination
        v-show="userTotal > 0"
        :total="userTotal"
        :page.sync="queryCouponUserFrom.pageNum"
        :limit.sync="queryCouponUserFrom.pageSize"
        @pagination="queryCouponUserListByPage"
      />
    </el-dialog>
  </div>
</template>

<script>
import { timeComparison } from "@/utils/timeConversion";
import { listInfo, listIssue, queryCouponUserList } from "@/api/coupon";

export default {
  name: "Coupon_CreateIssue",
  data() {
    return {
      loading: false,
      dateRangeCreatedDate: [],
      createForm: {
        issueRemark: "",
        issueName: "",
        showIdList: [],
        availableControl: "0",
        appointedDaysList: [],
        cycleDaysList: [],
        issueType: "",
        discountThresholdAmt: "0",
        couponIssueRelationList: [],
        giveLimit: 9,
        giveCount: 999999,
      },
      couponList: [],

      title: "",
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 100,
      // 优惠券总条数
      userTotal: 100,
      // 优惠券的信息
      couponUserList: [],
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 10, // 初始值只能比10大
        issueName: null,
        issueRemark: null,
        issueType: null,
        levelId: this.levelId,
        CreateTime: null,
        status: null,
      },
      queryCouponUserFrom: {
        levelId: this.levelId,
        issueId: 0,
        couponId: null,
        stationId: null,
        pageNum: 1,
        pageSize: 10,
      },
      issueList: [],
      timeSelect: [
        ,
        ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
        [
          "1号",
          "2号",
          "3号",
          "4号",
          "5号",
          "6号",
          "7号",
          "8号",
          "9号",
          "10号",
          "11号",
          "12号",
          "13号",
          "14号",
          "15号",
          "16号",
          "17号",
          "18号",
          "19号",
          "20号",
          "21号",
          "22号",
          "23号",
          "24号",
          "25号",
          "26号",
          "27号",
          "28号",
          "29号",
          "30号",
          "31号",
        ],
      ],
      collapse: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    translateTime(row) {
      let timeString = "";
      const availableControleType = row.availableControl;
      if (availableControleType == 0) {
        return "用户一直都可以领取";
      }
      timeString = "用户只能在";
      if (availableControleType == 1) {
        timeString += "每周的";
      }
      if (availableControleType == 2) {
        timeString += "每月的";
      }
      if (availableControleType == 3) {
        timeString += "指定的日期 ";
      }
      if (availableControleType == 1 || availableControleType == 2) {
        row.cycleDaysList.forEach((ele) => {
          timeString += this.timeSelect[availableControleType][ele] + "、";
        });
      } else if (availableControleType == 3) {
        timeString += row.appointedDaysList.toString();
      }

      timeString = timeString.replace(/(、)$/g, "") + "可以领取劵";
      return timeString;
    },
    getIssueList() {
      this.loading = true;
      const queryParams = this.addDateRange(
        this.queryForm,
        this.dateRangeCreatedDate
      );

      // const time = timeComparison(
      //   "earching",
      //   queryParams.beginTime,
      //   queryParams.endTime
      // );
      // if (!time) return (this.loading = false);

      listIssue(queryParams)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            if (res.rows == null) {
              this.total = 0;
              this.issueList = [];
            } else {
              this.total = res.total;
              this.issueList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.loading = false;
          this.msgError("亲，拉取领取方式列表失败~");
        });
    },
    getCoupon() {
      listInfo({
        pageNum: 1,
        pageSize: 1000,
        status: 1,
      })
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.couponList = [];
            } else {
              this.couponList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取优惠券列表失败~");
        });
    },
    init() {
      this.getCoupon();
      this.getIssueList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.queryForm.pageSize = 10;
      this.getIssueList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.dateRangeCreatedDate = [];
      this.handleQuery();
    },
    /** 查看优惠券信息 */
    handlequeryCouponUserList(row) {
      this.queryCouponUserFrom.issueId = row;

      queryCouponUserList(this.queryCouponUserFrom).then((response) => {
        this.couponUserList = response.rows;
        this.userTotal = response.total;
        this.title = "用户优惠券信息";
        this.open = true;
      });
    },
    /** 分页查看信息 */
    queryCouponUserListByPage() {
      queryCouponUserList(this.queryCouponUserFrom).then((response) => {
        this.couponUserList = response.rows;
        this.userTotal = response.total;
        this.title = "用户优惠券信息";
        this.open = true;
      });
    },
  },
};
</script>
<style lang="scss"></style>
